<template>
    <div class="box">
		<input type="text" v-model="title" @keyup.enter="add" placeholder="按回车确定">
	</div>
</template>

<script>

    export default {
		name:'MyHeader',
		data() {
			return {
				title:'',
			}
		},
		methods: {
			add(){
				if(this.title!=''){
					let thing = {id:Math.random(),title:this.title,done:false}
					this.$emit('addThing',thing)
					this.title = ''
				}else{
					alert('添加事项不能为空!')
				}
				//将用户输入包装为事件对象
				
			}
		},
	}
</script>

<style scoped>
	input {
		width: 100%;
		height: 28px;
		font-size: 14px;
		border: 1px solid #ccc;
		border-radius: 4px;
		padding: 4px 7px;
		margin-bottom: 15px;
	}
	input:focus {
		outline: none;
		border-color: rgb(82, 168, 236);
	}
</style>